<template>
  <!--新增设备运行记录-->
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <el-form :model="form2" style="width: 1130px; margin-left: 25px;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单据编号" label-width="100px" required>
              <el-input placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单据日期" label-width="100px" required>
              <el-date-picker v-model="form.documentDate2" type="date" placeholder="请选择日期" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="登记人" label-width="100px">
              <el-input placeholder="刑素怀" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在部门" label-width="100px">
              <el-input placeholder="生产部门" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" label-width="100px">
              <el-input type="textarea" placeholder="请输入备注" v-model="form.remark2" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!--设备信息-->
    <div>
      <el-card class="box-card2">
        <div slot="header" class="clearfix">
          <span>设备信息</span>
        </div>
        <el-form :model="form" label-width="120px" style="width: 1130px; margin-left: 25px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="设备名称" required>
                <el-input v-model="form.deviceName" placeholder="请输入" suffix-icon="el-icon-search"
                  @click.native="dialogVisible = true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备编号">
                <el-input v-model="form.deviceCode" placeholder="EQ001" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="设备类型">
                <el-input v-model="form.deviceType" placeholder="压力设备" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格型号">
                <el-input v-model="form.specification" placeholder="HY-1000" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="存放位置">
                <el-input v-model="form.location" placeholder="车间A1" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="使用部门">
                <el-input v-model="form.department" placeholder="制造部" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!--运行信息-->
    <div>
      <el-card class="box-card3">
        <div slot="header" class="clearfix">
          <span>运行信息</span>
        </div>
        <el-form :model="form3" label-width="130px" style="width: 1130px; margin-left: 25px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="设备开机人" required>
                <el-input v-model="form.startOperator3" placeholder="请输入" suffix-icon="el-icon-search"
                  @click.native="centerDialogVisible = true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备关机人" required>
                <el-input v-model="form.stopOperator3" placeholder="请输入" suffix-icon="el-icon-search"
                  @click.native="centerDialogVisible = true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="设备开机时间" required>
                <el-date-picker v-model="form.startTime3" placeholder="选择日期时间" type="datetime" format="yyyy-MM-dd HH:mm"
                  style="width: 425px;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备关机时间" required>
                <el-date-picker v-model="form.stopTime3" placeholder="选择日期时间" type="datetime" format="yyyy-MM-dd HH:mm"
                  style="width: 425px;"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="累计运行时长(h)" required>
                <el-input v-model="form.totalRunTime3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="停机时长(h)">
                <el-input v-model="form.downtime3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="实际运行时长(h)">
                <el-input v-model="form.actualRunTime3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划运行时长(h)">
                <el-input v-model="form.plannedRunTime3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!--生产信息-->
    <div>
      <el-card class="box-card4">
        <div slot="header" class="clearfix">
          <span>生产信息</span>
        </div>
        <el-form :model="form4" label-width="130px" style="width: 1130px; margin-left: 25px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="生产班组">
                <el-select v-model="form4.productionTeam" placeholder="请选择" style="width: 425px;">
                  <el-option label="班组A" value="teamA"></el-option>
                  <el-option label="班组B" value="teamB"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班次时间">
                <el-select v-model="form4.shiftTime" placeholder="请选择" style="width: 425px;">
                  <el-option label="早班" value="morning"></el-option>
                  <el-option label="晚班" value="evening"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="生产日期">
                <el-date-picker v-model="form4.productionDate" placeholder="请选择日期"
                  style="width: 425px;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产产品">
                <el-select v-model="form4.product" placeholder="请选择" style="width: 425px;">
                  <el-option label="产品A" value="productA"></el-option>
                  <el-option label="产品B" value="productB"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="生产总数量" required>
                <el-input v-model="form4.totalProduction" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合格品数量" required>
                <el-input v-model="form4.qualifiedProduct" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="不合格品数量">
                <el-input v-model="form4.unqualifiedProduct" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合格率">
                <el-input v-model="form4.qualificationRate" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="理想速度  (件/h)" required>
                <el-input v-model="form4.idealSpeed" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!--选择人员弹窗-->
    <el-dialog :visible.sync="centerDialogVisible" title="选择人员" width="500px">
      <el-input v-model="search" placeholder="请输入搜索" prefix-icon="el-icon-search"
        style="margin-bottom: 10px;"></el-input>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-tree :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
            @node-click="handleNodeClick">
          </el-tree>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" class="box-card5">
            <div slot="header" class="clearfix">
              <span>已选对象 {{ selectedNodes.length }}</span>
              <el-button type="text" @click="clearSelection" style="float: right; padding: 3px 0;">清空</el-button>
            </div>
            <el-tag v-for="(node, index) in selectedNodes" :key="index" closable @close="removeNode(node)">
              {{ node.label }}
            </el-tag>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确认</el-button>
      </div>
    </el-dialog>
    <!--设备选择-->
    <el-dialog title="选择设备" :visible.sync="dialogVisible" width="60%">
      <div>
        <el-input placeholder="请输入设备编号/名称/规格型号" v-model="searchInput"
          style="width: 20%; margin-right: 10px;"></el-input>
        <el-select placeholder="请选择设备类型" v-model="selectedType" style="width: 20%; margin-right: 10px;">
          <el-option label="生产设备" value="生产设备"></el-option>
        </el-select>
        <el-select placeholder="请选择使用部门" v-model="selectedDepartment" style="width: 20%; margin-right: 10px;">
          <el-option label="生产部门" value="生产部门"></el-option>
        </el-select>
        <el-button type="primary" @click="handleSearch2">查询</el-button>
        <el-button @click="handleReset2">重置</el-button>
      </div>

      <el-table size="mini" :cell-style="{ padding: '0px' }" :row-style="{ height: '35px' }" :data="filteredData"
        style="width: 100%; margin-top: 20px;" ref="singleTable" highlight-current-row
        @current-change="handleCurrentChange" stripe>
        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
        <el-table-column prop="序号" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="设备编号" label="设备编号" width="170" align="center"></el-table-column>
        <el-table-column prop="设备名称" label="设备名称" align="center"></el-table-column>
        <el-table-column prop="规格型号" label="规格型号" align="center"></el-table-column>
        <el-table-column prop="设备类型" label="设备类型" align="center"></el-table-column>
        <el-table-column prop="品牌" label="品牌" align="center"></el-table-column>
        <el-table-column prop="使用部门" label="使用部门" align="center"></el-table-column>
        <el-table-column prop="存放位置" label="存放位置" align="center"></el-table-column>
      </el-table>

      <el-pagination background layout="prev, pager, next, sizes, total" :total="total" :page-size.sync="pageSize"
        :current-page.sync="currentPage" @current-change="handlePageChange2" style="margin-top: 20px;" />

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm2">确认</el-button>
      </div>
    </el-dialog>

    <el-footer class="footer">
      <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px;">关闭</el-button>
      <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px;">确认</el-button>
    </el-footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //选择设备数据
      currentRow: null,
      //确认选择设备数据
      currentQue: [],
      //选择设备初始化数据
      filteredData: [
        { 序号: 1, 设备编号: 'SB2022111713202', 设备名称: '机床', 规格型号: 'CNC-500', 设备类型: '生产设备', 品牌: '不知名品牌', 使用部门: '生产部门', 存放位置: '生产车间' },
        { 序号: 1, 设备编号: 'SB2022111713202', 设备名称: '机床', 规格型号: 'CNC-500', 设备类型: '生产设备', 品牌: '不知名品牌', 使用部门: '生产部门', 存放位置: '生产车间' },
        { 序号: 1, 设备编号: 'SB2022111713202', 设备名称: '机床', 规格型号: 'CNC-500', 设备类型: '生产设备', 品牌: '不知名品牌', 使用部门: '生产部门', 存放位置: '生产车间' },
        { 序号: 1, 设备编号: 'SB2022111713202', 设备名称: '机床', 规格型号: 'CNC-500', 设备类型: '生产设备', 品牌: '不知名品牌', 使用部门: '生产部门', 存放位置: '生产车间' },
        { 序号: 1, 设备编号: 'SB2022111713202', 设备名称: '机床', 规格型号: 'CNC-500', 设备类型: '生产设备', 品牌: '不知名品牌', 使用部门: '生产部门', 存放位置: '生产车间' },
        { 序号: 1, 设备编号: 'SB2022111713202', 设备名称: '机床', 规格型号: 'CNC-500', 设备类型: '生产设备', 品牌: '不知名品牌', 使用部门: '生产部门', 存放位置: '生产车间' },
      ],
      search: '',
      //选择人员数据
      selectedNodes: [],
      treeData: [
        {
          label: 'XXXX科技有限公司',
          children: [
            {
              label: '项目部',
              children: [
                { label: '王虎' },
                { label: '于红' },
              ],
            },
            {
              label: '设计部',
              children: [
                { label: '丁坤' },
                { label: '吴婷' },
              ],
            },
            {
              label: '财务部',
              children: [
                { label: '马书奇' },
                { label: '曹爽' },
              ],
            },
            {
              label: '人事部',
              children: [
                { label: '王志强' },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      //人员选择弹窗
      centerDialogVisible: false,
      //设备选择弹框
      dialogVisible: false,
      //基础信息
      form2: {
        documentDate: '',
        remark: '',
      },
      //运行记录
      form3: {
        startOperator: '',
        stopOperator: '',
        startTime: '',
        stopTime: '',
        totalRunTime: '',
        downtime: '',
        actualRunTime: '',
        plannedRunTime: '',
      },
      //生产信息
      form4: {
        productionTeam: '',
        shiftTime: '',
        productionDate: '',
        product: '',
        totalProduction: '',
        qualifiedProduct: '',
        unqualifiedProduct: '',
        qualificationRate: '',
        idealSpeed: '',
      },
      //设备记录
      form: {
        deviceName: '',
        deviceCode: 'EQ001',
        deviceType: '压力设备',
        specification: 'HY-1000',
        location: '车间A1',
        department: '制造部',
      }
    };
  },
  methods: {
    handleConfirm() {
      // 处理确认操作
      // this.dialogVisible = false;
    },
    //确认取消
    handleCancel() {
      this.$router.go(-1)
    },
    handleConfirm2() {
      this.currentQue = this.currentRow
      this.dialogVisible = false
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleNodeClick(data) {
      console.log("选择数据", data)
      if (!this.selectedNodes.includes(data) && data.children == null) {
        this.selectedNodes = []
        this.selectedNodes.push(data);
      }
    },
    removeNode(node) {
      this.selectedNodes = this.selectedNodes.filter(n => n !== node);
    },
    clearSelection() {
      this.selectedNodes = [];
    },
    confirmSelection() {
      this.dialogVisible = false;
      console.log('已选对象', this.selectedNodes);
    },
  }
};
</script>

<style scoped>
.content {
  flex: 1;
  padding: 20px;
}

.fixed-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  text-align: center;
  background-color: #eeeded;
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
}

.dialog-footer {
  text-align: right;
}

.el-card {
  margin: 20px;
  width: 1265px;
  height: 270px;
}

.box-card2 {
  width: 1265px;
  height: 260px;
}

.box-card3 {
  width: 1265px;
  height: 310px;
}

.box-card4 {
  width: 1265px;
  height: 380px;
}

.box-card5 {
  width: 200px;
  height: 300px;
}
</style>
